<template>
  <div class="order-detail-box">
    <order-header title="订单详情">
      <template v-slot:tip>
        <span>请谨防钓鱼链接或诈骗电话，了解更多></span>
      </template>
    </order-header>
    <div class="order-info">
      <div class="order-status">
        <div class="status-item">
          <label>订单状态：</label>
          <span>{{ detail.orderStatusString }}</span>
        </div>
        <div class="status-item">
          <label>订单编号：</label>
          <span>{{ detail.orderNo }}</span>
        </div>
        <div class="status-item">
          <label>下单时间：</label>
          <span>{{ detail.createTime }}</span>
        </div>
        <el-button 
          v-if="[1,2,3].includes(detail.orderStatus)"
          style="margin: 10px 0" 
          type="success"
          @click="handleConfirmOrder(detail.orderNo)"
          >确认收货
        </el-button>
        <el-button 
          v-if="detail.orderStatus == 0" 
          style="margin-bottom: 10px" 
          type="primary"
          @click="showPayFn">
          去支付
        </el-button>
        <el-button 
          v-if="!(detail.orderStatus < 0 || detail.orderStatus == 4)"
          @click="cancel(detail.orderNo)" 
          type="warning">
          取消订单
        </el-button>
      </div>
      <div class="order-price">
        <div class="price-item">
          <label>商品金额：</label>
          <span>¥ {{ detail.totalPrice }}</span>
        </div>
        <div class="price-item">
          <label>配送方式：</label>
          <span>顺丰快递</span>
        </div>
      </div>
      <Card
        v-for="item in detail.ecomOrderItemVOS"
        :key="item.goodsId"
        style="background: #fff; font-size: 16px;"
        :num="item.goodsCount"
        :price="item.sellingPrice"
        :title="item.goodsName"
        :thumb="prefix(item.goodsCoverImg)"
      >
      <template #footer>
        <el-button round size="small" v-if="detail.orderStatus == 4" @click="comment(item)">评价</el-button>
      </template>
      </Card> 
    </div>
    <el-dialog 
        :visible.sync="showPay"
        title="支付" 
        width="400px">
        <div class="pay-content">
          <div class="pay-item">
            <span>订单编号</span>
            <span>{{ detail.orderNo }}</span>
          </div>
          <div class="pay-item" style="margin-top: 10px;">
            <span>支付金额 </span>
            <span>¥{{ detail.totalPrice }}</span>
          </div>
          <div class="pay-item" style="margin-top: 10px;">
            <el-radio :label="1" v-model="payType">支付宝支付</el-radio>
            <el-radio :label="2" v-model="payType">微信支付</el-radio>
          </div>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="showPay = false">取 消</el-button>
          <el-button type="primary" @click="pay">确 定</el-button>
        </span>
      </el-dialog>

      <el-dialog
        title="商品评价"
        :visible.sync="showCommentForm"
        width="30%"
        :before-close="handleClose">
        <el-form :model="commentForm">
          <el-form-item label="评分" :label-width="formLabelWidth">
            <el-rate v-model="commentForm.star"></el-rate>
          </el-form-item>
          <el-form-item label="内容" :label-width="formLabelWidth" placeholder="呼起键盘,写更有帮助性的评价吧">
            <el-input type="textarea" v-model="commentForm.content"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="showCommentForm = false">取 消</el-button>
          <el-button type="primary" @click="submitComment()">提 交</el-button>
        </span>
      </el-dialog>
  </div>
</template>

<script>
import { getOrderDetail, cancelOrder, confirmOrder, payOrder } from '../service/order'
import OrderHeader from './../components/OrderHeader'
import Card from 'vant/lib/card';
import 'vant/lib/card/style';
import {addComment} from '../service/comment';

export default {
  components: {
    OrderHeader,
    Card
  },
  data() {
    return {
      detail: {},
      showPay: false,
      payType: 1,
      showCommentForm: false,
      commentForm:{
        star:0,
        content:"好评"
      }
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    async init() {
      const { id } = this.$route.query
      const { data } = await getOrderDetail(id)
      this.detail = data;
    },
    prefix(url) {
      if (url && url.startsWith("http")) {
        return url;
      } else {
        url = `http://localhost:8080${url}`;
        return url;
      }
    },
    handleConfirmOrder(id) {
      this.$confirm('是否确认收货？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        confirmOrder(id).then(res => {
          if (res.resultCode === 200) {
            this.$message({ message: '确认成功', type: 'success' });
            this.init();
          }
        })
      }).catch(() => {
        this.$message.error('取消收货');
      });
    },
    cancel(id) {
      this.$confirm('确认取消订单？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        cancelOrder(id).then(res => {
          if (res.resultCode === 200) {
            this.$message({ message: '删除成功', type: 'success' });
            this.init();
          }
        })
      }).catch(() => {
        this.$message({
          message: '取消操作',
          type: 'warning'
        });
      });
    },
    showPayFn() {
      this.showPay = true
    },
    async pay() {
      await payOrder({ orderNo: this.detail.orderNo, payType: this.payType })
      this.showPay = false
      this.init()
    },
    comment(item){
      this.showCommentForm=true;
      this.commentForm=item;
    },
    submitComment(){
      this.showCommentForm=false;
      //提交评价
      addComment({
        goodsId:this.commentForm.goodsId,
        goodsCount:this.commentForm.goodsCount,
        star:this.commentForm.star,
        content:this.commentForm.content
      }) .then(() => {
          this.$message.success({ 
          dangerouslyUseHTMLString: true,
          message:"评价成功"});
        });
    }
  }
}
</script>

<style lang="less" scoped>
.order-detail-box {
    background: #f7f7f7;
    padding-bottom: 40px;

    .order-info {
      width: 1000px;
      margin: 0 auto;
    }
    .order-status {
      background: #fff;
      margin-top: 44px;
      padding: 20px;
      font-size: 15px;
      .status-item {
        margin-bottom: 10px;
        label {
          color: #999;
        }
      }
    }
    .order-price {
      background: #fff;
      margin: 20px 0;
      padding: 20px;
      font-size: 15px;
      .price-item {
        margin-bottom: 10px;
        label {
          color: #999;
        }
      }
    }
    .van-card {
      margin-top: 0;
    }
    .van-card__content {
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
  }
</style>